<template>
  <div class="detail clear_fix">
    <el-container>
      <!-- 左侧导航 -->
      <Nav />
      <el-container>
        <!-- 头部 -->
        <el-header
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <!-- 面包屑 -->
          <BreadCumb />
          <div class="back-btn">
            <el-button type="primary" @click="goBack()">退出</el-button>
          </div>
        </el-header>
        <!-- 主体 -->
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Nav from "./Nav";
import BreadCumb from "./BreadCumb";
export default {
  name: "Detail",
  data() {
    return {};
  },
  components: {
    Nav,
    BreadCumb,
  },
  methods: {
    goBack() {
      // 退出登录
      this.$router.push("/login");
      // 清除缓存
      sessionStorage.removeItem("userName");
    },
  },
};
</script>

<style  lang="less" scoped>
.detail {
  .back-btn {
    left: right;
  }
}

// .detail {
//   box-sizing: content-box;
// }
</style>
